let productListStrAll = ''
/**
 * 调用商品接口获取商品列表数据
 */
async function getProductList(pageNo) {
    let data = await myPromise({
        method: 'get',
        url: 'http://api.yuguoxy.com/api/shop/list',
        data: {
            pageNo, //页号
            pageSize: 8 //每页数据条数
        }
    })
    let {
        resultCode,
        resultInfo
    } = data

    if (resultCode == 1) {
        let productList = resultInfo.list
        // productListAll = [...productListAll,...productList]

        showProductList(productList)


    }
}

// 搜索



$('.s2').on('click', async function () {
    let id = getRandom(1, 10)
    console.log(id);
    let data = await myPromise({
        method: 'get',
        url: 'http://api.yuguoxy.com/api/shop/list/category',
        data: {
            categoryId: id,
            pageNo: 1,
            pageSize: 8
        }
    })
    console.log(data);
    let {
        resultCode,
        resultInfo,
    } = data
    if (resultCode == 1) {
       
        let productLists = resultInfo.list

        // console.log(productLists);
        localStorage.setItem('Product-9.9', JSON.stringify(productLists))
    
        location.href = './search.html'

    }
})
// 用户管理
function showUser() {
    let userStr = localStorage.getItem('login-user')
    let user = JSON.parse(userStr)
    if(user){
        let str = `<img src="${user.headerimg}" alt="">
              <span class="nick">${user.username}</span>
              `
    const Longin = document.querySelector('section')
    Longin.innerHTML = str
    }
}
showUser()
function onBtn() {
    $('.longin').on('click', '.btn-1', function () {
        // const Longin = document.querySelector('section')
        // Longin.innerHTML = ''
     
        localStorage.removeItem('login-user')
    location.href = './index.html'
    // showProductList(productList) 
    // onMore()
    // showBanner(list)

        // showUser()
    })
}
getBanner()
onBtn()
// 点击登录进入登录页面
$('.longin').on('click', '.btn', function (e) {
    e=e||window.event
    alert('add')
    // e.preventDefault()
   

    // location.href = './login.html'
    // showUser()
})



/**
 * 动态渲染商品列表数据
 */
function showProductList(productList) {
    let str = productList.map(item => {
        return `<div class="product-item" onclick="onProductDetail(${item.id})">
                    <img src="${item.picture}" alt="">
                    <p>${item.shop}</p>
                    <p><span>￥${item.price}</span> <span>${item.oldprice}人已买</span></p>
                </div>`
    }).join('')
    productListStrAll = productListStrAll + str
    $('.product-list').html(productListStrAll)
}

/**
 * 加载更多
 */
function onMore() {
    let pageNo = 1 //页号
    $('.more > button').on('click', function () {

        getProductList(++pageNo)
    })
}

/**
 * 商品详情
 */
function onProductDetail(id) {

    location.href = './detail.html?id=' + id
}

getBanner()

getProductList(1)
onMore()
// 匀速回到顶部
$('.top').on('click', function () {
    let timer = setInterval(function () {
        // console.log($(window).scrollTop());
        // if($(window).scrollTop()<100){
        //     $('.top').css('display','none')
        // } else if($(window).scrollTop()>100){
        // $('.top').css('display','dispaly')
        $(window).scrollTop($(window).scrollTop() - 200)
        if ($(window).scrollTop() == 0) {
            clearInterval(timer)
        }
        // }


    }, 100)



})
// 轮播
async function getBanner() {
    let data = await myPromise({
        method: 'get',
        url: 'http://api.yuguoxy.com/api/shop/banner'
    })
    let {
        resultCode,
        resultInfo
    } = data
    if (resultCode == 1) {
        showBanner(resultInfo.list)
    }
}

/**
 * 动态渲染轮播
 */
function showBanner(list) {
    const swiperItemStr = list.map(item => {
        return `<div class="swiper-slide"><img src="${item.url}" alt="1"></div>`
    }).join('')

    const str = `<div class="swiper-wrapper">` +
        swiperItemStr +
        `</div>
                <!-- 如果需要分页器 -->
                <div class="swiper-pagination"></div>

                <!-- 如果需要导航按钮 -->
                <div class="swiper-button-prev"></div>
                <div class="swiper-button-next"></div>`

    $('.swiper').html(str)

    new Swiper('.swiper', {
        loop: true, // 循环模式选项
        autoplay: true,
        // 如果需要分页器
        pagination: {
            el: '.swiper-pagination',
            clickable: true,
        },
        navigation: {
            nextEl: '.swiper-button-next',
            prevEl: '.swiper-button-prev',
        },
    })
}

function getRandom(m, n) {
    var x = Math.max(m, n)
    var y = Math.min(m, n)
    return Math.floor(Math.random() * (x - y) + y)
}
// 下载app
$('.footer').on('click', 'hgroup', function () {
    location.href = 'https://a.app.qq.com/o/simple.jsp?ckey=CK1362065872812&pkgname=com.lukou.youxuan'
})